<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>演示vue3指令</title>
  <script src="../vue-3.0.11.js"></script>
  <style>
    a{
      display: block;
    }
    #app{
      display: flex;
      flex-direction: column;
    }
    .container{
      margin: 20px;
      border: #eeeeee solid 1px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <h1>v-text和v-html</h1>
      <!-- message 原样输出到页面 -->
      <div v-text="message"></div>
      <!-- 解析 text 中的html元素 -->
      <div v-html="text"></div>
    </div>
    
    <div class="container">
      <h1>v-bind</h1>
      <!-- 绑定属性 -->
      <a v-bind:href="url">绑定属性</a>

      <!-- 使用变量绑定属性,动态属性 -->
      <a v-bind:[href]="url">绑定动态属性</a>
      <!-- 绑定属性, 动态属性的值可以是js表达式-->
      <a v-bind:[attr+'f']="url">绑定动态属性,js表达式</a>
    </div>
    
    <div class="container">
      <h1>v-on</h1>
      <button v-on:click='onClick'>监听事件</button>
      <button @click='onClick'>简写形式绑定时间@click</button>
    </div>
   

    <div class="container">
      <h1>v-if, v-show</h1>
      <div v-if="flag" v-text="message"></div>
      <div v-else>aaaa</div>
      <button v-show="flag">bbb</button>
    </div>

    <div class="container">
      <h1>v-for</h1>
      <ul>
        <li v-for="(item,index) in titles" :key="index">{{item}}{{index}}</li>
      </ul>

      <ul>
        <li v-for="(value,key,index) in book" :key="index">{{key}}:{{value}}:{{index}}</li>
      </ul>
    </div>

    <div class="container">
      <h1>双向绑定</h1>
      <input type="text" v-model="age">
      <button @click="showAge">显示age的值</button>
    </div>

  </div>
  <script>
    const { createApp, ref } = Vue
    const message = "hello"
    const text = "<div style='color:red'>hello</div>"
    const url = "https://www.baidu.com"
    const href = 'href'
    const attr = 'hre'
    const flag = true
    const titles = ['长歌', '藏剑', '七秀']
    const book = {
      title: '百年孤独',
      author: '马尔克斯',
      pubdate: '2000'
    }
    const age = ref(18)
    function onClick(event) {
      console.log("🚀 ~ file: index.html ~ line 28 ~ onClick ~ event", event)
    }
    function showAge() {
      console.log(age.value)
    }
    const app = {
      setup() {
        return {
          message,
          text,
          url,
          href,
          attr,
          onClick,
          flag,
          titles,
          book,
          age,
          showAge
        }
      }
    }

    createApp(app).mount('#app')
  </script>
</body>

</html>